<template>
    <div ref="lineChartRef" class="chart-container"></div>
</template>

<script lang="ts" setup>
import { ref, defineProps, toRefs, watchEffect, onMounted, nextTick } from "vue";
import { echarts, ECOption } from "@/hooks/echarts/chartInitHook";
import { users } from "@/shared/types/user";
import { ECharts } from "echarts/core";
import { courses } from '../../shared/types/courses';

const lineChartRef = ref<HTMLDivElement>();
let lineChart: ECharts;

const props = defineProps<{
    expInfo:
    | {
        name: string;
        questions: { score: number }[],
        userExperiments: { score: number }[],
        _id: string
    }[]
    | undefined;
    courseInfo:
    | {//students
        _id: string,
        student: users[],
        course: string
    }[]
    | undefined;
    color:string[];
}>()

const { expInfo, courseInfo } = toRefs(props)

watchEffect(() => {

    if (!lineChartRef.value || !expInfo.value || !courseInfo.value) return

    const rates = expInfo.value.map(exp => {
        return Math.round((exp.userExperiments.length / courseInfo.value!.length) * 100)
    })
    console.log(rates);

    lineChart = echarts.init(lineChartRef.value)

    const theOption: ECOption = {
        title: {
            text: '实验完成率',
            textStyle: {
                fontWeight: 'normal',
                fontSize: 16
            },
            top: '10%'
        },
        grid: {
            // show:true,
            top: '20%',
            bottom: '10%',
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            },
            // formatter:'{b}<br />{a}:{c}<br />'
        },
        legend: {
            data: ['完成率'],
            top: '10%'
        },
        xAxis: {
            boundaryGap: true,
            data: expInfo.value.map(e => e.name),
            axisTick: {
                alignWithLabel: true
            }
        },
        yAxis: {
            name: '完成率 (%)',
            nameLocation: 'middle',
            nameGap: 40,
            // scale: true,
            nameTextStyle: {

            }
        },
        emphasis: {
            itemStyle: {
                opacity: 1
            },
        },
        series: [
            {
                name: '完成率',
                type: 'line',
                data: rates,
                // lineStyle:{
                //     color:'#'
                // },
                itemStyle: {
                    opacity: 0
                }
            },
        ],
        color: props.color,
    }

    lineChart.setOption(theOption)

})
</script>

<style lang="less" scoped>
.chart-container {
    height: 100%;
    width: 100%;
    position: relative;
    // background-color: aqua;
}
</style>
